<!DOCTYPE html>
<html>

	<head>
		<title>Unboxing</title>
		<meta charset="UTF-8">
		<style>
			html,
			body {
				padding: 0;
				margin: 0;
			}
			
			.main {
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
			}
			
			.formpane {
				top: 10px;
				right: 10px;
				background: rgba(230, 230, 230, 0.85);
			}
		</style>

		<script>
			htconfig = {
				Style: {
					'edge.width': 1
				}
			};
		</script>
		<script src="../lib/core/ht.js"></script>
		<!--建立3D模型-->
		<script src="../lib/plugin/ht-modeling.js"></script> 
		<!--使用form表单-->
		<script src="../lib/plugin/ht-form.js"></script>
		<script>
			//          ht.Default.setImage('DieTexture', '');
			ht.Default.setImage('DieTexture', '../img/pic.png');

			function init() {
				dm = new ht.DataModel();
				g3d = new ht.graph3d.Graph3dView(dm);

				view = g3d.getView();
				view.className = 'main';
				document.body.appendChild(view);
				window.addEventListener('resize', function(e) {
					g3d.iv();
				}, false);

				createFormPane();    
				formPane.getView().className = 'formpane';
				document.body.appendChild(formPane.getView());

				g3d.setEye(0, 700, 1000);
				g3d.setCenter(0, 150, 0);
				g3d.setGridVisible(true);

				node1 = createNode(-300, Math.PI / 6, false, false);
				node2 = createNode(300, 0, true, true);

				currentNode = null;
				sm = dm.sm();
				sm.ms(function(e) {
					currentNode = sm.ld();
					formPane.setDisabled(currentNode == null);
					if(currentNode) {
						formPane.v('frameVisible', currentNode.s('wf.visible'));
						formPane.v('frameShort', currentNode.s('wf.short'));
						formPane.v('frameWidth', currentNode.s('wf.width'));
						formPane.v('frameSize', currentNode.a('frame.size'));
						formPane.v('frameRotation', currentNode.a('frame.rotation'));
						['left', 'right', 'top', 'bottom', 'front', 'back'].forEach(function(face) {
							formPane.v(face + 'Angle', currentNode.s(face + '.angle'));
						});
					}
				});
				sm.setSelectionMode('single');
				sm.ss(node1);

				g3d.getWireframe = function(data) {
					if(data.s('wf.visible')) {
						var size = data.a('frame.size');
						return {
							width: data.s('wf.width'),
							short: data.s('wf.short'),
							color: data.s('wf.color'),
							mat: ht.Default.createMatrix([{
									s3: [size, size, size]
								},
								{
									r3: [0, data.a('frame.rotation'), 0]
								}
							])
						};
					}
					return null;
				};

			}

			function createNode(x, angle, short, toggleable) {
				var node = new ht.CSGBox();
				dm.add(node);
				node.s3(300, 300, 300);
				node.p3(x, 150, 0);
				node.s({
					'all.image': 'DieTexture',
					'back.uv': [0.25, 0.75, 0.25, 1, 0.5, 1, 0.5, 0.75],
					'front.uv': [0.25, 0.25, 0.25, 0.5, 0.5, 0.5, 0.5, 0.25],
					'top.uv': [0.25, 0.5, 0.25, 0.75, 0.5, 0.75, 0.5, 0.5],
					'bottom.uv': [0.25, 0, 0.25, 0.25, 0.5, 0.25, 0.5, 0],
					'left.uv': [0, 0.75, 0, 1, 0.25, 1, 0.25, 0.75],
					'right.uv': [0.5, 0.75, 0.5, 1, 0.75, 1, 0.75, 0.75],

					'left.angle': angle,
					'right.angle': angle,
					'top.angle': angle,
					'bottom.angle': angle,
					'front.angle': angle,
					'back.angle': angle,

					'left.toggleable': toggleable,
					'right.toggleable': toggleable,
					'top.toggleable': toggleable,
					'bottom.toggleable': toggleable,
					'front.toggleable': toggleable,
					'back.toggleable': toggleable,

					'left.axis': 'bottom',
					'right.axis': 'bottom',
					'top.axis': 'top',
					'bottom.axis': 'bottom',
					'front.axis': 'bottom',
					'back.axis': 'bottom',

					'wf.visible': true,
					'wf.short': short,
					'wf.width': 3
				});
				node.a({
					'frame.size': 1,
					'frame.rotation': 0
				});
				return node;
			}

			function createFormPane() {
				formPane = new ht.widget.FormPane();
				formPane.setWidth(230);
				formPane.setHeight(350);

				formPane.addRow([{
					element: 'Face:',
					font: 'bold 12px arial, sans-serif'
				}], [0.1]);
				formPane.addRow([], [0.1], 1.01, {
					background: '#43AFF1'
				});

				['left', 'right', 'top', 'bottom', 'front', 'back'].forEach(function(face) {
					formPane.addRow([face,
						{
							id: face + 'Angle',
							slider: {
								min: 0,
								max: Math.PI / 2,
								onValueChanged: function() {
									if(currentNode) {
										currentNode.s(face + '.angle', this.getValue());
									}
								}
							}
						}
					], [70, 0.1]);
				});

				formPane.addRow([{
					element: 'Frame:',
					font: 'bold 12px arial, sans-serif'
				}], [0.1]);
				formPane.addRow([], [0.1], 1.01, {
					background: '#43AFF1'
				});
				formPane.addRow([{
						id: 'frameVisible',
						checkBox: {
							label: 'visible',
							onValueChanged: function(oldValue, newValue) {
								if(currentNode) {
									currentNode.s('wf.visible', newValue);
								}
							}
						}
					},
					{
						id: 'frameShort',
						checkBox: {
							label: 'short',
							onValueChanged: function(oldValue, newValue) {
								if(currentNode) {
									currentNode.s('wf.short', newValue);
								}
							}
						}
					}
				], [0.1, 0.1]);
				formPane.addRow(['width',
					{
						id: 'frameWidth',
						slider: {
							min: 0,
							max: 8,
							step: 1,
							onValueChanged: function(oldValue, newValue) {
								if(currentNode) {
									currentNode.s('wf.width', newValue);
								}
							}
						}
					}
				], [70, 0.1]);
				formPane.addRow(['size:',
					{
						id: 'frameSize',
						slider: {
							min: 0,
							max: 2,
							onValueChanged: function() {
								if(currentNode) {
									currentNode.a('frame.size', this.getValue());
								}
							}
						}
					}
				], [70, 0.1]);
				formPane.addRow(['rotation',
					{
						id: 'frameRotation',
						slider: {
							min: 0,
							max: Math.PI,
							onValueChanged: function(oldValue, newValue) {
								if(currentNode) {
									currentNode.a('frame.rotation', this.getValue());
								}
							}
						}
					}
				], [70, 0.1]);
			}
		</script>
	</head>

	<body onload="init();">
	</body>

</html>